
<template>
  <div
    ref="chartsRef"
    class="charts"
  ></div>
</template>

<script lang="ts" setup>

const chartsRef = ref<HTMLDivElement | HTMLCanvasElement>();
let timeInterval: NodeJS.Timer | null = null;

const currentIndex = ref(-1)
const { setOption, chart } = useCharts(chartsRef as Ref<HTMLDivElement>);

const option: any = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: "55%",
      center: ["50%", "50%"],
      data: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
      emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
  ],
}

onMounted(() => {
  setOption(option)

  nextTick(() => {
    /** 开启轮播 */
    timeInterval = setInterval(() => {
      let dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      chart.value?.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: currentIndex.value,
      });
      currentIndex.value = (currentIndex.value + 1) % dataLen;
      // 高亮当前图形
      chart.value?.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: currentIndex.value,
      });
    }, 1500)
  })
});

onUnmounted(() => {
  timeInterval && clearInterval(timeInterval as any)
})
</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>